<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/md5.js"></script>
<script type="text/javascript" src="/tool.js"></script>

<body>
<table border="1px solid red">
    <tr>
        <td>文件1</td>
        <td>
            <input name="file" type="file" id="inputfile"/>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <button onclick="check()">提交</button>
        </td>
    </tr>
</table>
</body>
<script type="text/javascript">
    //上传文件的话  得 单独出来
    function test1(shardIndex) {
        console.log(shardIndex);
        //以formData的方式提交
        var fd = new FormData();
        //获取表单中的file
        var file = $('#inputfile').get(0).files[0];
        //文件分片  以20MB为一分片
        var shardSize = 20 * 1024 * 1024;
        //定义分片索引
        var shardIndex = shardIndex;
        //定义分片的起始位置
        var start = (shardIndex - 1) * shardSize;
        //定义分片结束的位置
        var end = Math.min(file.size, start + shardSize);
        //按大小切割文件段
        var fileShard = file.slice(start, end);
        //分片的大小
        var size = file.size;
        //总片数
        var shardTotal = Math.ceil(size / shardSize);
        //文件的后缀名
        var fileName = file.name;
        var suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
        //把视频的信息存储为一个字符串
        var filedetails = file.name + file.size + file.type + file.lastModifiedDate;
        //使用当前文件的信息用md5加密生成一个key 这个加密是根据文件的信息来加密的  如果相同的文件 加的密还是一样的
        var key = hex_md5(filedetails);
        var key10 = parseInt(key, 16);
        //把加密的信息 转为一个64位的
        var key62 = Tool._10to62(key10);
        //前面的参数必须和controller层定义的一样
        fd.append('file', fileShard);
        fd.append('suffix', suffix);
        fd.append('shardIndex', shardIndex);
        fd.append('shardSize', shardSize);
        fd.append('shardTotal', shardTotal);
        fd.append('size', size);
        fd.append("key", key62)
        $.ajax({
            url: "/file/upload",
            type: "post",
            cache: false,
            data: fd,
            processData: false,//很重要，告诉jquery不要对form进行处理
            contentType: false,//很重要，指定为false才能形成正确的Content-Type
            success: function (data) {
                //这里应该是一个递归调用
                if (shardIndex < shardTotal) {
                    var index = shardIndex + 1;
                    test1(index);
                } else {
                    alert(data)
                }
            },
            error: function () {
                //请求出错处理
            }
        })
        //发送ajax请求把参数传递到后台里面
    }

    //判断这个加密文件存在不存在
    function check() {
        var file = $('#inputfile').get(0).files[0];
        //把视频的信息存储为一个字符串
        var filedetails = file.name + file.size + file.type + file.lastModifiedDate;
        //使用当前文件的信息用md5加密生成一个key 这个加密是根据文件的信息来加密的  如果相同的文件 加的密还是一样的
        var key = hex_md5(filedetails);
        var key10 = parseInt(key, 16);
        //把加密的信息 转为一个64位的
        var key62 = Tool._10to62(key10);
        //检查这个key存在不存在
        $.ajax({
            url: "/file/check",
            type: "post",
            data: {'key': key62},
            success: function (data) {
                console.log(data);
                if (data.code == 500) {
                    //这个方法必须抽离出来
                    test1(1);
                } else {
                    if (data.data.shardIndex == data.data.shardTotal) {
                        alert("极速上传成功");
                    } else {
                        //找到这个是第几片 去重新上传
                        test1(parseInt(data.data.shardIndex));
                    }
                }
            }
        })
    }
</script>
</html>